<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>销售管理</title>
	<link rel="shortcut icon" href="./static/image/favicon.ico">
	<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/element-ui/2.14.1/theme-chalk/index.min.css">
	<link rel="stylesheet" type="text/css" href="./static/libs/element-ui/index.css">
	<link rel="stylesheet" type="text/css" href="./static/css/public.css">
	<link rel="stylesheet" type="text/css" href="./static/css/m_tailwind.css">
	<style>
		.sale-manage-wp {
			position: relative;
			padding: 24px 24px 0;
			height: 100%;
			padding-bottom: 80px;
		}
		.scroll-box {
			height: 100%;
			overflow: auto;
		}
		.t-bottom {
			position: absolute;
			z-index: 10;
			left: 24px;
			right: 24px;
			bottom: 0;
			background: #fff;
		}
		.paging-box {
			text-align: right;
			padding: 24px;
			background: #fff;
		}
		.scroll-bar-box {
			width: 100%;
			overflow-x: auto;
			background: #fff;
		}
		.scroll-bar-box div {
			width: 0;
			height: 1px;
		}

		.row1 {
			margin-top: 8px;
			margin-bottom: 16px;
			display: flex;
			align-items: center;
			padding: 12px 20px;
			background: rgba(0,0,0,.04);
    	border-radius: 6px;
		}
		.row1 .left {
			display: flex;
			align-items: center;
			line-height: 40px;
			margin-left: 8px;
	    font-size: 16px;
	    color: rgba(0,0,0,.8);
	    font-weight: 500;
		}
		.row1 .left img {
			margin-right: 8px;
			width: 20px;
			height: 20px;
		}
		.kssx-list {
			display: flex;
			align-items: center;
			padding-bottom: 16px;
			margin-bottom: 16px;
			border-bottom: 1px solid #E4E4E4;
		}
		.kssx-list .label {
			width: 110px;
			padding-right: 12px;
			text-align: right;
			font-size: 12px;
			color: #606266;
		}
		.kssx-list .list {
			width: 0;
			flex: 1;
			display: flex;
		}
		.kssx-list .list .item {
			flex: 1;
			width: 0;
			height: 42px;
			border-radius: 6px;
			border: 1px solid rgba(0,0,0,.14);
			background-color: #fff;
			cursor: pointer;
			color: rgba(0,0,0,.8);
			font-size: 12px;
			line-height: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.kssx-list .list .item+.item {
			margin-left: 10px;
		}
		.kssx-list .list .item i {
			font-size: 16px;
			color: #ACACAC;
		}
	</style>
</head>
<body>

	<div id="app" v-cloak>
		<m-layout>
			<div class="sale-manage-wp">
				<div class="scroll-box">
					<m-tip>自动关闭JIT提醒: 若SKC满足自动关JIT条件，将于X天后自动关闭，请提前完成JIT转备货调价，否则将限制申请备货。</m-tip>
					<div class="row1">
						<div class="left">
							<img src="./static/image/img17.png"/>
							暂无确认履约
						</div>
					</div>
					<m-search :model="form" label-width="110px" :handle-span="8">
						<el-col :span="24">
							<div class="kssx-list">
								<span class="label">快速筛选</span>
								<div class="list">
									<div v-for="(item, index) in kssx" :key="index" class="item">
										<span>{{item.label}}（{{item.num}}）</span>
										<el-tooltip effect="light" :content="item.tip" placement="top">
											<i class="el-icon-warning-outline"></i>
										</el-tooltip>
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="8">
							<el-form-item label="类目" prop="aa">
								<el-input v-model="form.aa" placeholder="请输入"/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="SPU" prop="bb">
								<el-input v-model="form.bb" placeholder="请输入"/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="SKC" prop="cc">
								<el-input v-model="form.cc" placeholder="请输入"/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="是否VMI" prop="dd">
								<el-select class="w-full" v-model="form.dd" placeholder="请选择">
							    <el-option v-for="item in yes_or_no" :key="item.value" :label="item.label" :value="item.value"></el-option>
							  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="是否JIT" prop="ee">
								<el-select class="w-full" v-model="form.ee" placeholder="请选择">
							    <el-option v-for="item in yes_or_no" :key="item.value" :label="item.label" :value="item.value"></el-option>
							  </el-select>
							</el-form-item>
						</el-col>
						<template slot="hide">
							<el-col :span="8">
								<el-form-item label="备货区域" prop="ff">
									<el-select class="w-full" v-model="form.ff" placeholder="请选择">
								    <el-option v-for="item in bhqy" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="加入站点时长" prop="gg">
									<el-input placeholder="请输入内容" v-model="form.gg">
								    <template slot="append">天</template>
								  </el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="SKC货号" prop="hh">
									<el-input v-model="form.hh" placeholder="请输入"/>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="SKU货号" prop="ii">
									<el-input v-model="form.ii" placeholder="请输入"/>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="SKU剩余库存" prop="jj">
									<el-input placeholder="请输入内容" v-model="form.jj">
								    <el-select v-model="form.kk" style="width: 60px;" slot="prepend" placeholder="请选择">
								      <el-option v-for="item in dw_list" :key="item.value" :label="item.label" :value="item.value"></el-option>
								    </el-select>
								  </el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="SKU可售天数" prop="ll">
									<el-input placeholder="请输入内容" v-model="form.ll">
								    <el-select v-model="form.mm" style="width: 60px;" slot="prepend" placeholder="请选择">
								      <el-option v-for="item in dw_list" :key="item.value" :label="item.label" :value="item.value"></el-option>
								    </el-select>
								  </el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="图片审核状态" prop="nn">
									<el-select class="w-full" v-model="form.nn" placeholder="请选择">
								    <el-option v-for="item in tpshzt" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="商品名称" prop="oo">
									<el-input v-model="form.oo" placeholder="请输入"/>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="选品状态" prop="pp">
									<el-select class="w-full" v-model="form.pp" placeholder="请选择">
								    <el-option v-for="item in xzzt" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="价格调整" prop="qq">
									<div class="flex w-full">
										<el-select v-model="form.rr" style="width: 100px;" placeholder="请选择">
								      <el-option v-for="item in day_list" :key="item.value" :label="item.label" :value="item.value"></el-option>
								    </el-select>
								    <el-select class="w-0 flex-1" v-model="form.qq" placeholder="请选择">
								      <el-option v-for="item in dj_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
								    </el-select>
									</div>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="调价状态" prop="ss">
									<el-select class="w-full" v-model="form.ss" placeholder="请选择">
								    <el-option v-for="item in tjzt" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="同步至高价备货单" prop="tt">
									<el-select class="w-full" v-model="form.tt" placeholder="请选择">
								    <el-option v-for="item in gjbhd" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="是否定制商品" prop="uu">
									<el-select class="w-full" v-model="form.uu" placeholder="请选择">
								    <el-option v-for="item in dzsp" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="16">
								<el-form-item label="销量" prop="vv">
									<el-input placeholder="请输入内容" v-model="form.vv">
								    <el-select v-model="form.ca" style="width: 100px;" slot="prepend" placeholder="请选择">
								      <el-option v-for="item in xl_day" :key="item.value" :label="item.label" :value="item.value"></el-option>
								    </el-select>
								  </el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="是否热销款" prop="ww">
									<el-select class="w-full" v-model="form.ww" placeholder="请选择">
								    <el-option v-for="item in is_rxk" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="商品评分" prop="xx">
									<el-select class="w-full" v-model="form.xx" placeholder="请选择">
								    <el-option v-for="item in sp_pf" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="JIT转备货进度" prop="yy">
									<el-select class="w-full" v-model="form.yy" placeholder="请选择">
								    <el-option v-for="item in bhjd" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="是否自动关JIT" prop="zz">
									<el-select class="w-full" v-model="form.zz" placeholder="请选择">
								    <el-option v-for="item in yes_or_no" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="备货状态" prop="ba">
									<el-select class="w-full" v-model="form.ba" placeholder="请选择">
								    <el-option v-for="item in bhzt" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
						</template>
					</m-search>
					<div class="pt-5 pb-5 flex justify-between items-center">
						<el-button size="mini" disabled>批量申请备货</el-button>
						<div>
							<el-button type="text" style="color:#0071F3;">JIT转备货操作指南</el-button>
							<el-button type="text" style="color:#0071F3;">高级排序</el-button>
						</div>
					</div>
					<el-table size="mini" ref="tableRef" border :data="tableData" :span-method="objectSpanMethod" style="width: 100%">
			      <el-table-column fixed="left" prop="aaa" label="商品信息" width="280">
			      	<template slot-scope="scope">
								<goods-info3 :data="scope.row"></goods-info3>
							</template>
			      </el-table-column>
			      <el-table-column fixed="left" prop="className" label="SKU属性" width="120"></el-table-column>
			      <el-table-column fixed="left" prop="aaa" label="申报价格(CNY)" width="110" algin="right">
			      	<template slot-scope="scope">
			      		￥{{scope.row.supplierPrice}}
			      	</template>
			      </el-table-column>
			      <el-table-column prop="skuExtCode" label="SKU货号" width="120"></el-table-column>
			      <el-table-column label="开款价格状态" width="100">
			      	<template slot-scope="scope">
			      		{{scope.row.priceReviewStatus == 2 ? '已生效' : '-'}}
			      	</template>
			      </el-table-column>
			      <el-table-column prop="aaa" label="调价状态" width="100">
			      	<template slot-scope="scope">-</template>
			      </el-table-column>
			      <el-table-column label="缺货数量" width="80" align="right">
			      	<template slot-scope="scope">0</template>
			      </el-table-column>
			      <el-table-column prop="inCartNumber7d" label="近7日用户加购数量" width="150" align="right"></el-table-column>
			      <el-table-column prop="inCardNumber" label="用户累计加购数量" width="140" align="right"></el-table-column>
			      <el-table-column prop="ydytxdh" label="已订阅待提醒到货" width="140" align="right"></el-table-column>
			      <el-table-column label="销售数据" align="center">
			      	<el-table-column prop="todaySaleVolume" label="今日" width="90" align="right"></el-table-column>
				      <el-table-column prop="lastSevenDaysSaleVolume" label="近7日" width="90" align="right"></el-table-column>
				      <el-table-column prop="lastThirtyDaysSaleVolume" label="近30天" width="90" align="right"></el-table-column>
			      </el-table-column>
			      <el-table-column label="生产建议信息">
			      	<el-table-column prop="aaa" label="生产信息" width="168">
			      		<template slot-scope="scope">
			      			<div class="color-gray-400">生产周期：-</div>
			      			<div class="color-gray-400">生产量可售天数：-</div>
			      			<div>
			      				<span class="blue-btn">修改</span>
			      			</div>
			      		</template>
			      	</el-table-column>
			      	<el-table-column prop="aaa" label="建议生产数" width="96" align="right">
			      		<template slot-scope="scope">-</template>
			      	</el-table-column>
			      	<el-table-column prop="aaa" label="剩余件数" width="96" align="right">
			      		<template slot-scope="scope">-</template>
			      	</el-table-column>
			      </el-table-column>
			      <el-table-column label="库存数据">
			      	<el-table-column prop="salesInventoryNum" label="仓内可用库存" width="100" align="right"></el-table-column>
			      	<el-table-column prop="aaa" label="仓内暂不可用库存" width="130">
			      		<template slot-scope="scope">0</template>
			      	</el-table-column>
			      	<el-table-column prop="inventoryNumInfo.waitReceiveNum" label="已发货库存" width="90"></el-table-column>
			      	<el-table-column prop="aaa" label="已创建备货单待发货库存" width="130" align="right">
			      		<template slot-scope="scope">0</template>
			      	</el-table-column>
			      	<el-table-column prop="aaa" label="待审核备货库存" width="120" align="right">
			      		<template slot-scope="scope">0</template>
			      	</el-table-column>
			      </el-table-column>
			      <el-table-column  label="备货计划">
			      	<el-table-column prop="purchaseConfig" label="备货逻辑" width="80" align="right"></el-table-column>
			      	<el-table-column prop="aaa" label="建议备货量" width="90" align="right">
			      		<template slot-scope="scope">-</template>
			      	</el-table-column>
			      	<el-table-column prop="availableSaleDaysFromInventory" label="库存可售天数" width="100">
			      		<template slot-scope="scope">{{scope.row.availableSaleDaysFromInventory || '-'}}</template>
			      	</el-table-column>
			      	<el-table-column prop="warehouseAvailableSaleDays" label="仓内库存可售天数" width="130">
			      		<template slot-scope="scope">{{scope.row.warehouseAvailableSaleDays || '-'}}</template>
			      	</el-table-column>
			      	<el-table-column prop="availableSaleDays" label="可售天数" width="110">
			      		<template slot-scope="scope">{{scope.row.availableSaleDays || '-'}}</template>
			      	</el-table-column>
			      </el-table-column>
			      <el-table-column prop="aaa" label="建议备货引导" width="120">
			      	<template slot-scope="scope">-</template>
			      </el-table-column>
			      <el-table-column fixed="right" prop="aaa" label="操作" width="120">
			      	<template slot-scope="scope">
			      		<el-link class="text-12 blue-btn" :underline="false">申请备货</el-link>
								<el-link class="text-12 blue-btn" :underline="false">备货详情</el-link>
								<el-link class="text-12 blue-btn" :underline="false">发起调价</el-link>
								<el-link class="text-12 blue-btn" :underline="false">变更备货状态</el-link>
								<el-link class="text-12 blue-btn" :underline="false">备货状态变更记录</el-link>
								<el-link class="text-12 blue-btn" :underline="false">销售趋势</el-link>
			      	</template>
			      </el-table-column>
			    </el-table>
				</div>
				<div class="t-bottom">
					<div class="scroll-bar-box" ref="scrollXRef">
						<div></div>
					</div>
					<div class="paging-box">
						<el-pagination
							background
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="paging.current"
				      :page-sizes="[10, 20, 30, 40, 100]"
				      :page-size="paging.pageSize"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="paging.total">
				    </el-pagination>
					</div>
				</div>
			</div>
		</m-layout>
	</div>

	<script src="./static/libs/vue2.6.8/vue.min.js"></script>
	<script src="./static/libs/element-ui/index.min.js"></script>
	<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
	<script src="./static/js/Tools.js"></script>
	<script src="./config/saleManage.js"></script>
	<script src="./static/components/common.js"></script>
	<script src="./static/data/saleData.js"></script>
	<script src="./static/image/goodsImg/title.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data() {
				return {
					form: {
						aa: '',
						bb: '',
						cc: '',
						dd: '',
						ee: '',
						ff: '',
						gg: '',
						hh: '',
						ii: '',
						jj: '',
						kk: '<=',
						ll: '',
						mm: '<=',
						nn: '',
						oo: '',
						pp: '',
						qq: '',
						rr: '近7天',
						ss: '',
						tt: '',
						uu: '',
						vv: '',
						ww: '',
						xx: '',
						yy: '',
						ba: '',
						ca: '今日',
					},
					// 是否
					yes_or_no: [
						{label: '是', value: '是'},
						{label: '否', value: '否'},
					],
					// 备货区域
					bhqy: [
						{label: '国内备货', value: '国内备货'},
						{label: '海外备货', value: '海外备货'},
						{label: '保税仓备货', value: '保税仓备货'},
					],
					// 剩余库存单位
					dw_list: [
						{label: '<=', value: '<='},
						{label: '>=', value: '>='},
					],
					// 图片审核状态
					tpshzt: [
						{label: '未完成', value: '未完成'},
						{label: '已完成', value: '已完成'},
					],
					// 选中状态
					xzzt: [
						{label: '待创建首单', value: '待创建首单'},
						{label: '已创建首单', value: '已创建首单'},
						{label: '已加入站点', value: '已加入站点'},
						{label: '已下架', value: '已下架'},
					],
					// 天数
					day_list: [
						{label: '近3天', value: '近3天'},
						{label: '近7天', value: '近7天'},
						{label: '近14天', value: '近14天'},
						{label: '近30天', value: '近30天'},
					],
					// 调价类型
					dj_type: [
						{label: '涨价', value: '涨价'},
						{label: '降价', value: '降价'},
						{label: '未发起涨价', value: '未发起涨价'},
						{label: '未发起降价', value: '未发起降价'},
					],
					// 调价状态
					tjzt: [
						{label: '价格申报中', value: '价格申报中'},
						{label: '待卖家确认', value: '待卖家确认'},
						{label: '已生效', value: '已生效'},
						{label: '已作废', value: '已作废'},
					],
					// 高价备货单
					gjbhd: [
						{label: '同步', value: '同步'},
						{label: '不同步', value: '不同步'},
					],
					// 是否定制商品
					dzsp: [
						{label: '订制品', value: '订制品'},
						{label: '非定制品', value: '非定制品'},
					],
					// 销量时间
					xl_day: [
						{label: '今日', value: '今日'},
						{label: '近7天', value: '近7天'},
						{label: '近30天', value: '近30天'},
					],
					// 是否热销款
					is_rxk: [
						{label: '热销款', value: '热销款'},
						{label: '非热销款', value: '非热销款'},
					],
					// 评分
					sp_pf: [
						{label: '1~2分', value: '1~2分'},
						{label: '2~3分', value: '2~3分'},
						{label: '3~4分', value: '3~4分'},
						{label: '4~5分', value: '4~5分'},
					],
					// 备货进度
					bhjd: [
						{label: '待调价', value: '待调价'},
						{label: '调价中', value: '调价中'},
						{label: '备货中', value: '备货中'},
					],
					// 备货状态
					bhzt: [
						{label: '正常备货', value: '正常备货'},
						{label: '暂时无法备货', value: '暂时无法备货'},
					],
					// 快速筛选
					kssx: [
						{label: '已缺货', value: '已缺货', num: 0, tip: '已缺货：有部分sku缺货即为skc缺货'},
						{label: '已断货', value: '已断货', num: 0, tip: '已断货：某一skc下，近16天销量大于0的sku在消费者端可销售库存全部为0时，该skc断货'},
						{label: '已断码', value: '已断码', num: 0, tip: '已断码：某一skc下，近16天销量大于0的sku在消费者端可销售库存部分为0时，该skc断码'},
						{label: '即将断码', value: '即将断码', num: 0, tip: '即将断码：某一skc下，近16天销量大于0的sku库存可售天数偏低时，该skc即将断码'},
						{label: '建议备货', value: '建议备货', num: 0, tip: '建议备货：当某个skc下的sku可售天数低于安全库存天数，该skc建议备货'},
					],

					tableHead: [
						{name: '商品信息', key: 'a1', width: 200},
						{name: 'SKU属性', key: 'a2'},
						{name: '申报价格(-)', key: 'a3'},
						{name: 'SKU货号', key: 'a4'},
						{name: '开款价格状态', key: 'a5'},
						{name: '调价状态', key: 'a6'},
						{name: '缺货数量', key: 'a7'},
						{name: '近7日用户加购数量', key: 'a8'},
						{name: '用户累计加购数量', key: 'a9'},
						{name: '已订阅待提醒到货', key: 'a10'},
						{name: '销售数据', key: 'a11'},
						{name: '库存数据', key: 'a12'},
						{name: 'VMI备货单数', key: 'a13'},
						{name: '非VMI备货单数', key: 'a14'},
						{name: '备货计划', key: 'a15'},
						{name: '建议备货引导', key: 'a16'},
					],
					
					tableData: [],
					paging: {
						current: 1,
						pageSize: 20,
						total: 0
					}
				}
			},
			mounted() {
				// this.randomData();
				// this.randomGood();

				this.getTableData();
				setTimeout(() => {
					this.bindScrollX();
				}, 200);
			},
			methods: {

				// 生产随机数据
				randomData() {
					let data = saleData.result.subOrderList;

					data.forEach(aItem => {
						aItem.skuQuantityDetailList.forEach(bItem => {
							// 近7日用户加购数量
							bItem.inCartNumber7d = parseInt(Math.random()*500+500);
							// 用户累计加购数量
							bItem.inCardNumber = parseInt(Math.random()*20000+10000);
							// 已订阅待提醒到货
							bItem.ydytxdh = parseInt(Math.random()*2500+1000);

							// 每天
							bItem.todaySaleVolume = parseInt(Math.random()*30);
							// 7天
							bItem.lastSevenDaysSaleVolume = parseInt(Math.random()*120+80);
							// 30天
							bItem.lastThirtyDaysSaleVolume = parseInt(Math.random()*200+600);
						})
					})

					var blob = new Blob([JSON.stringify(saleData)], {type: "text/plain;charset=utf-8"});
					saveAs(blob, "save.json");
				},

				// 生产随机图片与名字
				randomGood() {
					let aTitle = goodTitles.filter((item, index) => index%2 == 0);
					let aPrice = goodTitles.filter((item, index) => index%2 == 1);
					let data = saleData.result.subOrderList;
					data.forEach((aItem, aIndex) => {
						let randIndex = aIndex+1;
						if(aIndex >= aTitle.length) {
							randIndex = Math.ceil(Math.random()*aTitle.length);
						}
						aItem.productName = aTitle[randIndex-1];
						aItem.skuQuantityDetailList.forEach(bItem => {
							bItem.supplierPrice = (aPrice[randIndex-1]*5.3).toFixed(2);
						})
						let name = randIndex >= 10 ? randIndex : '0'+randIndex;
						aItem.productSkcPicture = `./static/image/goodsImg/${name}.webp`;
					})
					var blob = new Blob([JSON.stringify(saleData)], {type: "text/plain;charset=utf-8"});
					saveAs(blob, "save.json");
				},

				getTableData() {
					this.paging.total = saleData.result.subOrderList.length;
					var list = saleData.result.subOrderList.slice((this.paging.current-1)*this.paging.pageSize, this.paging.current*this.paging.pageSize);
					var res = [];
					list.forEach(function (aItem, aIndex) {
						let aRow = aItem.skuQuantityDetailList;
						aRow.forEach(function (bItem, bIndex) {
							var obj = {
								productSkcPicture: aItem.productSkcPicture,
								productName: aItem.productName,
								category: aItem.category,
								productSkcId: aItem.productSkcId,
								productId: aItem.productId,
								skcExtCode: aItem.skcExtCode,

								...bItem,
							}
							if(bIndex == 0) {
								obj.rows = aRow.length;
							}
							res.push(obj);
						})
					})
					this.tableData = res;
				},

				handleSizeChange(val) {
					this.paging.pageSize = val;
					this.getTableData();
				},

				handleCurrentChange(val) {
					this.paging.current = val;
					this.getTableData();
				},

				bindScrollX() {
					const oHead = this.$refs.tableRef.$el.querySelectorAll('.el-table__header-wrapper')[0];
					const oBody = this.$refs.tableRef.$el.querySelectorAll('.el-table__body-wrapper')[0];
					const oX = this.$refs.scrollXRef;
					const oXDiv = this.$refs.scrollXRef.querySelector('div');
					oXDiv.style.width = oHead.firstChild.clientWidth+28+'px'
					oX.onscroll = () => {
						let left = oX.scrollLeft;
      			oBody.scrollLeft = left;
      			oHead.scrollLeft = left;
					}
				},

				objectSpanMethod(data) {
					if([0, 13, 27].indexOf(data.columnIndex) != -1) {
						if(data.row.rows) {
							return {
	              rowspan: data.row.rows,
	              colspan: 1
	            };
						} else {
							return {
	              rowspan: 0,
	              colspan: 0
	            };
						}
					}
				}
			}
		})
	</script>
</body>
</html>